<template>
  <div class="investment main-body clearfix">
    <h2>
      <i class="iconfont iconInformation_icon_zixun" />
      <em class="blue-text">招商</em>加盟 • Merchants Join
      <button>查看更多</button>
    </h2>
    <div class="flow">
      <img src="../../../assets/img/home/index_img_join list.png" alt="">
    </div>
    <div class="flowList clearfix">
      <div v-for="i in 6" :key="i" class="flowBrand">
        <img src="../../../assets/img/home/disnep.png" alt="">
        <div class="flowListName">
          <h4>迪士尼</h4>
          <span>专业制造100年</span>
        </div>
      </div>
    </div>
    <div class="flowMark clearfix">
      <ul v-for="i in 4" :key="i">
        <li v-for="i in 6" :key="i" class="clearfix">
          <h5>阿迪达斯</h5>
          <span>
            <i class="iconfont iconmerchants_icon_shafa" />
            我要加盟
          </span>
        </li>
      </ul>
    </div>
    <div class="contact clearfix">
      <div class="flowPhone clearfix">
        <h2>
          轻松一步，靠近财富<em class="flowPhoneTitle">EASY STEP, CLOSE TO WEALTH</em>
        </h2>
        <el-form ref="from" :model="form" label-position="left" :rules="rules" :hide-required-asterisk="true">
          <el-form-item label="姓名:" prop="name">
            <el-input
              v-model="form.name"
              placeholder="王小姐"
            />
          </el-form-item>
          <el-form-item label="联系电话:" label-position="left" prop="phone">
            <el-input
              v-model="form.phone"
              autocomplete="off"
              placeholder="请输您的手机号"
            />
          </el-form-item>
          <el-button>提交</el-button>
        </el-form>
      </div>
      <div class="flowLine">
        <p>400-622-888</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Investment',
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    return {
      form: {
        name: '',
        phone: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  @import '../../../assets/template-item1/css/base.scss';
  .investment{
    @include panel;
    h2 {
      button {
          float: right;
          @include btn;
          margin-top: 25px;
      }
      button:hover {
        border: none;
        background-color: #D9D9D9;
      }
    }
    .flow{
      margin: 20px 0;
    }
    .flowList{
      .flowBrand{
        width:200px;
        height:202px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(235,235,235,1);
        text-align: center;
        float: left;
        img{
          width: 160px;
          height: 90px;
          margin-top: 5px;
        }
        .flowListName{
          margin: 10px auto;
          width: 140px;
          border-top: 1px solid #EBEBEB;
          h4{
            font-size:16px;
            font-weight:600;
            line-height:21px;
            margin: 10px 0;
            color:rgba(51,51,51,1);
          }
          span{
            font-size:12px;
            line-height:16px;
            color:rgba(153,153,153,1);
          }
        }
      }
    }
    .flowMark{
      ul{
        width:300px;
        margin: 20px 0;
        padding: 0px 30px;
        float: left;
        border-right: 1px dashed #cccccc;
        li{
          padding: 10px 0;
          h5{
            float: left;
            font-size:18px;
            line-height:24px;
            color:rgba(51,51,51,1);
          }
          span{
            width: 86px;
            height: 24px;
            display: block;
            border: 1px solid #417AEF;
            border-radius: 4px;
            line-height: 24px;
            float: right;
            color: #417AEF;
            padding: 0 2px;
          }
          span:hover{
            background-color: #417AEF;
            color: #ffffff;
          }
        }
      }
      ul:last-child{
        border: none;
      }
    }
    .contact{
      margin-bottom: 30px;
      .flowPhone{
        float: left;
        width: 794px;
        height: 150px;
        background: url('../../../assets/img/home/tijiao.png') no-repeat;
        padding: 24px 33px;
        h2{
          font-size:26px;
          font-weight:bold;
          line-height:45px;
          color:rgba(250,232,182,1);
          .flowPhoneTitle{
            font-size:20px;
            font-weight:bold;
            line-height:32px;
            color:rgba(250,232,182,1);
            opacity:0.56;
          }
        }
        .el-input {
          width: 160px;
          height: 36px;
          float: left;
        }
        .el-button{
          width:116px;
          height:36px;
          background:rgba(250,232,182,1);
          border-radius:4px;
          margin: 20px;
        }
      }
      .flowLine{
        float: right;
        width: 390px;
        height: 150px;
        background: url('../../../assets/img/home/index_img_hotline.png') no-repeat;
        p{
          font-size:36px;
          font-weight:bold;
          line-height:55px;
          color:rgba(250,232,182,1);
          position: relative;
          top: 70px;
          left: 100px;
        }
      }
    }
  }
</style>
